let BaseForm = require('@/common/BaseForm');
let comDriver = require('@/common/driver');

class Bean extends BaseForm{
    constructor(param = {}) {
        super(param);
    }

    getDefaultParam() {
        let result = Object.assign({}, super.getDefaultParam(), {
            element: '',
            vComponent: {},
            vMethod: {},
            vComputed: {},
            vue: null,
        });

        return result;
    }

    get vData() {
        return this.param.vue.$data;
    }

    getTemplateElementID() {
        return '.' + (this.param.element || 'yt_app');
    }

/*
    getTemplateElement() {
        let dom = document.getElementsByClassName(this.param.element);
        if (dom.length > 0) return dom[0];
        return null;
    }
*/

    getTemplateElement() {
        let dom = document.getElementsByClassName(this.param.element || 'yt_app');
        for (let i = 0; i < dom.length; i++)
            dom[i].remove();
        let div = document.createElement('div');
        let classes = (this.param.name || '').split('.');
        classes.push(this.param.element || 'yt_app');
        div.className = classes.join(' ');
        document.body.appendChild(div);

        dom = document.getElementsByClassName(this.param.element || 'yt_app');
        if (dom.length > 0) return dom[0];
        return null;
    }

    async getTemplateContent() {
        if (!this.param.prop) return "";
        return this.param.prop.template(this.param);
    }

    async showTemplate() {
        let dom = this.getTemplateElement();
        if (!dom) return;
        let content = await this.getTemplateContent();
        dom.innerHTML = content;
    }

    async showStyle() {
        if (!this.param.prop) return;
        this.param.prop.style();
    }


    async showContent() {
        await super.showContent();

        await this.showTemplate();

        await this.showStyle();
    }

    element(name) {
        return this.param.vue.$refs[this.elementText(name)];
    }


}


module.exports = Bean;
